<!DOCTYPE html>
<html style="height: 100%;">

<head>
    <title>信息科开放平台</title>
    <link rel="shortcut icon" href="/static/img/Icon.ico"> <!-- 网站图标 必须ico文件 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="/static/js/jquery-3.4.1.min.js"></script>

    <!--引入WebSocket断线重连插件-->
    <script src="/static/js/reconnecting-websocket.min.js"></script>

    <!-- 引入CSS： elementUI -->
    <link rel="stylesheet" href="/static/element-UI/index.css">
    <!-- 引入JS： Vue (before ElementUI JS)-->
    <script src="/static/vue/vue.js"></script>
    <!-- 引入JS： ElementUI JS -->
    <script src="/static/element-UI/index.js"></script>


    <style>
        body {
            /* 鼠标指针的样式 */
            cursor: url(/static/img/cursor.ico), auto;
        }
    </style>
    <script>
        // 低版本谷歌不支持ES6，没有padStart函数，解决办法是自己重新实现String.prototype.padStart
        // 需在head中定义
        if (!String.prototype.padStart) {
            String.prototype.padStart = function padStart(targetLength, padString) {
                targetLength = targetLength >> 0; //floor if number or convert non-number to 0;
                padString = String((typeof padString !== 'undefined' ? padString : ' '));
                if (this.length > targetLength) {
                    return String(this);
                } else {
                    targetLength = targetLength - this.length;
                    if (targetLength > padString.length) {
                        padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
                    }
                    return padString.slice(0, targetLength) + String(this);
                }
            };
        }
    </script>
</head>


<body style="height: 100%;overflow:hidden;margin: 0px;">
<div id="app" style="height: 100%;">

    <!--    顶栏  -->
    <el-row id="topMenuRow">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="topMenu_handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1">疫苗接种叫号系统</el-menu-item>

            <el-submenu index="2" style="float: right">
                <template slot="title" id="userNameText">信息科 陈呵呵</template>
                <el-menu-item index="2-1">个人资料</el-menu-item>
                <el-menu-item index="2-2">注销</el-menu-item>
            </el-submenu>

        </el-menu>
    </el-row>


    <el-row style="height: 100%">
        <!--    左侧菜单    -->
        <el-col :span="3" style="height: 100%">
            <el-menu
                    default-active="3"
                    class="el-menu-vertical-demo"
                    @open="leftMenu_handleOpen"
                    @close="leftMenu_handleClose"
                    @select="leftMenu_handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    style="height: 100%">
                <el-menu-item index="1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">叫号</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">身份证取号</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <i class="el-icon-document"></i>
                    <span slot="title">统计报表</span>
                </el-menu-item>

            </el-menu>
        </el-col>

        <!--     右侧工作区域    -->
        <el-col :span="20" :offset="1" style="height:100%;">

            <!--空白间隔栏-->
            <el-row style="height: 20px;"></el-row>
            <!--       工具栏-->
            <el-row id="toolBarRow">
                <el-form :inline="true" :model="toolBarData" class="demo-form-inline" size="small">
                    <el-form-item label="取号日期：">
                        <div class="block">
                            <el-date-picker
                                    v-model="timeRange"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button id="btn_search" type="warning" round @click="btn_search_click()"
                                   :loading="isLoading_btn_search"
                        >查询
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button id="btn_export" type="warning" round @click="exportExcle()"
                                   :loading="isLoading_btn_export"
                        >导出Excle
                        </el-button>
                    </el-form-item>

                </el-form>


            </el-row>

            <!--  分割线   -->
            <el-row id="dividerRow">
                <el-col :span="17">
                    <el-divider></el-divider>
                </el-col>
            </el-row>


            <!--表格区域-->
            <el-row style="height:100%;">
                <el-row>
                    <!-- 报表 -->
                    <el-col id="statisticTable" :span="24">
                        <el-table
                                :data="tableData"
                                fit
                                stripe
                                style="width: 100%;"
                                height="100%"
                                size="small">
                            <!--                            <el-table-column-->
                            <!--                                    label="序号"-->
                            <!--                                    type="index"-->
                            <!--                                    align="center"-->
                            <!--                                    width="50px">-->
                            <!--                            </el-table-column>-->
                            <el-table-column label="序号" align="center" width="50px">
                                <template scope="scope">
                                    <span>{{scope.$index+(currentPage - 1) * pageSize + 1}} </span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="brxm"
                                    label="姓名"
                                    align="center"
                                    min-width="90px"
                                    :show-overflow-tooltip='true'>
                            </el-table-column>
                            <el-table-column
                                    prop="brxb"
                                    label="性别"
                                    align="center"
                                    min-width="50px">
                            </el-table-column>
                            <el-table-column
                                    prop="brnl"
                                    label="年龄"
                                    align="center"
                                    min-width="50px">
                            </el-table-column>
                            <el-table-column
                                    prop="sfzh"
                                    label="身份证号"
                                    align="center"
                                    min-width="80px"
                                    :show-overflow-tooltip='true'>
                            </el-table-column>
                            <el-table-column
                                    prop="jtdz"
                                    label="家庭地址"
                                    align="center"
                                    min-width="200px"
                                    :show-overflow-tooltip='true'>
                            </el-table-column>
                            <el-table-column
                                    prop="yysj"
                                    label="取号时间"
                                    min-width="140px"
                                    align="center"
                                    :formatter="dateFormatYYSJ"
                                    :show-overflow-tooltip='true'
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="jhryxm"
                                    label="叫号人员"
                                    align="center"
                                    min-width="90px"
                                    :show-overflow-tooltip='true'
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="jhzs"
                                    label="叫号窗口"
                                    align="center"
                                    min-width="90px"
                                    :show-overflow-tooltip='true'
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="bzxx"
                                    label="备注"
                                    min-width="100px"
                                    align="center"
                                    :show-overflow-tooltip='true'
                            >
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
                <el-row id="pageRow">
                    <nav style="text-align: center">
                        <el-pagination
                                layout="prev, pager, next"
                                @current-change="handleCurrentChange"
                                :page-count="pageCount">
                        </el-pagination>
                    </nav>
                </el-row>
            </el-row>
        </el-col>
    </el-row>
</div>


<script>
    /*
    *  定义全局变量
    */
    var g_toastHandle;  // vue创建的toast实例，用于提示正在叫号的病人
    var IpAndPort = window.location.host; // IP和端口号

    // 解析token
    var token = getCookie('token');
    var strings = token.split("."); //截取token，获取载体
    var userInfo = JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g, "/"))))); //解析，需要吧‘_’,'-'进行转换否则会无法解析
    $("#userNameText")[0].innerHTML = "&nbsp;[&nbsp;" + userInfo.ksmc + "&nbsp;]&nbsp;&nbsp;" + userInfo.ygxm;


    // 本页面的vue对象
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                currentPage: 1, // 当前页号
                pageSize: 12,    // 每页显示的记录数
                pageCount: 1,    // 总页数
                activeIndex: '1',
                currentSelectObj: {},  // EL-Select选择器选中的option对象
                tableData: [],
                isLoading_btn_search: false,
                isLoading_btn_export: false,
                toolBarData: {},
                //
                // 时间选择器
                //
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                timeRange: [new Date(), new Date()]   // 登记时间的范围（默认今日）
            };
        },
        methods: {
            //
            // 当页码被改变
            //
            handleCurrentChange(val) {
                this.currentPage = val;
                this.search();
            },

            //
            // 点击【查询】
            //
            btn_search_click() {
                $("[id=btn_search]").blur();  // 按钮颜色恢复
                vue.isLoading_btn_search=true;  // loding 样式
                this.search();
            },

            //
            // 获取数据
            //
            search() {
                // 提交
                var tempMap = new Map();
                tempMap.set("qhrqBegin", dateFormat('YYYY-mm-dd', vue.timeRange[0]));
                tempMap.set("qhrqEnd", dateFormat('YYYY-mm-dd', vue.timeRange[1]));
                tempMap.set("currentPage", vue.currentPage);
                tempMap.set("pageSize", vue.pageSize);

                //map转obj
                var tempObj = Object.create(null);
                for (var key of tempMap) {
                    tempObj[key[0]] = key[1];
                }
                $.ajax({
                    url: "http://" + IpAndPort + "/StatisticController/getYM",
                    type: "POST",
                    contentType: 'application/json;charset=utf-8',
                    data: JSON.stringify(tempObj),
                    success: function (data) {
                        var jsonObj = $.parseJSON(data);
                        if (jsonObj.status == true) {
                            // 赋值
                            var dataList = $.parseJSON(jsonObj.detail).data;
                            var pageCount = $.parseJSON(jsonObj.detail).pageCount;
                            vue.tableData = dataList;
                            vue.pageCount = pageCount;
                        } else {
                            vue.$message.error('数据加载失败：' + jsonObj.detail);
                        }

                        vue.isLoading_btn_search=false;  // loading样式
                    },
                    error: function (data) {
                        vue.$message.error('数据加载失败：不能连接服务端');
                        vue.isLoading_btn_search=false;  // loading样式
                    }
                });
            },

            //
            // 点击【菜单栏】
            //
            topMenu_handleSelect(key, keyPath) {
                console.log(key, keyPath);
                if(key=='2-2'){
                    document.cookie = "token=;path=/";  // token置空
                    window.location.href = "http://" + IpAndPort + "/ViewController/Login";
                }
            },
            leftMenu_handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            leftMenu_handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            leftMenu_handleSelect(key, keyPath) {
                console.log(key, keyPath);
                if (key == '1') {
                    window.location.href = "http://" + IpAndPort + "/ViewController/YM_CallNumber";
                } else if (key == '2') {
                    window.location.href = "http://" + IpAndPort + "/ViewController/YM_TakeNumber";
                } else if (key == '3') {
                    //window.location.href = "http://" + IpAndPort + "/ViewController/YM_Statistic";
                }
            },
            //
            // 点击【导出Excle】
            //
            exportExcle() {


                vue.isLoading_btn_export=true;  // loding 样式

                $("[id=btn_export]").blur();  // 按钮颜色恢复
                //开始请求
                var url = "http://" + IpAndPort + "/StatisticController/exportExcle_YM";
                var xhr = new XMLHttpRequest();

                //=====参数构造==================
                var tempMap = new Map();
                var qhrqBegin = dateFormat('YYYY-mm-dd', vue.timeRange[0]);
                var qhrqEnd = dateFormat('YYYY-mm-dd', vue.timeRange[1]);
                tempMap.set("qhrqBegin", qhrqBegin);
                tempMap.set("qhrqEnd", qhrqEnd);

                //map转obj
                var tempObj = Object.create(null);
                for (var key of tempMap) {
                    tempObj[key[0]] = key[1];
                }
                var data = JSON.stringify(tempObj);
                //=================================

                xhr.open('post', url, true);
                xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8') // json格式发送
                xhr.responseType = "blob";    // 返回类型blob
                // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
                xhr.onload = function () {
                    // 请求完成
                    if (this.status == 200) {
                        // 返回200
                        var blob = this.response;
                        var reader = new FileReader();
                        reader.readAsDataURL(blob);    // 转换为base64，可以直接放入a表情href
                        reader.onload = function (e) {
                            // 转换完成，创建一个a标签用于下载
                            var a = document.createElement('a');
                            a.download = qhrqBegin + "至" + qhrqEnd + '.xls'; // 文件名
                            a.href = e.target.result;
                            $("body").append(a);    // 修复firefox中无法触发click
                            a.click();
                            $(a).remove();
                            vue.$message.success('导出成功');
                        }
                    }
                    vue.isLoading_btn_export=false;  // loading样式
                };
                // 发送请求
                xhr.send(data);
            },
            // 当EL-Select选择器的项被用户修改时
            onChangeElSelect(e) {
                currentSelectObj = e;   // 记录当前被选择的对象
            },

            //
            // table时间格式化
            //
            dateFormatYYSJ: function (row, column) {
                var fmt = "YYYY-mm-dd HH:MM:SS";
                var date = new Date(row.yysj);//row 表示一行数据, yysj 表示要格式化的字段名称
                var ret;
                const opt = {
                    "Y+": date.getFullYear().toString(),        // 年
                    "m+": (date.getMonth() + 1).toString(),     // 月
                    "d+": date.getDate().toString(),            // 日
                    "H+": date.getHours().toString(),           // 时
                    "M+": date.getMinutes().toString(),         // 分
                    "S+": date.getSeconds().toString()          // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (var k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    }
                    ;
                }
                ;
                return fmt;
            },
            reCall(row, index) {
            },
            callNext() {

            }
        }
    });


    //
    // 重设表格高度
    //
    var 网页总高度 = $("#app")[0].clientHeight;
    var 顶栏高度 = $("#topMenuRow")[0].clientHeight;
    var 间隔栏写死20px = 20;
    var 工具栏高度 = $("#toolBarRow")[0].clientHeight;
    var 分割线高度 = $("#dividerRow")[0].clientHeight;
    var 表格标签高度 = 0;
    var 底部分页栏高度 = $("#pageRow")[0].clientHeight;
    var 表格高度 = 网页总高度 - 顶栏高度 - 间隔栏写死20px - 工具栏高度 - 分割线高度 - 表格标签高度 - 底部分页栏高度;
    $("#statisticTable").css("height", 表格高度);


    /*
    * JS工具方法
    * */

    /**
     * 获取指定名称的cookie
     */
    function getCookie(name) {
        var strcookie = document.cookie;//获取cookie字符串
        var arrcookie = strcookie.split("; ");//分割
        //遍历匹配
        for (var i = 0; i < arrcookie.length; i++) {
            var arr = arrcookie[i].split("=");
            if (arr[0] == name) {
                return arr[1];
            }
        }
        return "";
    }

    /**
     * 时间日期格式化
     *
     */
    function dateFormat(fmt, date) {
        var ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (var k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            }
            ;
        }
        ;
        return fmt;
    }

    //鼠标点击弹出爱心❤
    jQuery(function ($) {
        showLoveWhenMouseClick(window, document);
    });

</script>

</body>
<!-- 在body之后加载鼠标点击特效的JS（鼠标点击放烟花、弹出爱心❤） -->
<script src="/static/js/mouse-click.js"></script>

</html>